<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册表单验证</title>
		<style type="text/css">
			.errInfo{color: red; font-size: 12px;}
			.errInfo img{ vertical-align:middle;}
		</style>
	<script src="./jquery-3.6.1.min.js"></script>
	</head>
	<body>
		<form action="Demo12_01.html" >
		<table width="1000" align="center">
			<caption>用户注册</caption>
			<tr>
				<td width="300" align="right" height="30">用户名:</td>
				<td width="700"><input type="text" id="txtAccount" >
					<span id="spanAccount" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">密码:</td>
				<td width="700"><input type="password" id="txtPwd" >
					<span id="spanPwd" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">密码确认:</td>
				<td width="700"><input type="password" id="txtPwdOk" ">
					<span id="spanPwdOk" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">性别:</td>
				<td width="700">
					<input type="radio" name="sex" id="rdBoy" value="男"  checked="checked">男
					<input type="radio" name="sex" id="rdGirl" value="女" >女	
					<span id="spanSex" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">专业:</td>
				<td width="700">
					<select id="selProfessional" >
						<option value="">--请选择--</option>
						<option value="软件开发">软件开发</option>
						<option value="电子商务">电子商务</option>
						<option value="国际贸易">国际贸易</option>
						<option value="工商管理">工商管理</option>
						<option value="高级护理">高级护理</option>
					</select>
					<span id="spanProfessional" class="errInfo"></span>
				</td>
			</tr>			
			<tr>
				<td width="300" align="right" height="30">爱好:</td>
				<td width="700" >
					<input type="checkbox" name="hobby" value="抽烟" "/>抽烟
					<input type="checkbox" name="hobby" value="喝酒" "/>喝酒
					<input type="checkbox" name="hobby" value="打游戏" "/>打游戏
					<input type="checkbox" name="hobby" value="烫头发" "/>烫头发
					<input type="checkbox" name="hobby" value="足球" "/>足球
					<input type="checkbox" name="hobby" value="篮球" "/>篮球
					<span id="spanHobby" class="errInfo" ></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">自我介绍:</td>
				<td width="700">
					<textarea id="mySelf" rows="10" cols="60"></textarea>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">&nbsp;</td>
				<td width="700">
					<input type="submit" value="注册" />
					<input type="reset" value="取消" />
				</td>
			</tr>
		</table>
		
		</form>		
		<script type="text/javascript">
			$(function(){
				$('#txtAccount').blur (function(){
					if ($('#txtAccount').val() ==''|| $('#txtAccount'.val()=null)) {
						alert('用户名不能为空')
					}
				})

			    $('#txtPwd').blur(function(){
					if ($('#txtPwd').val()=='' || $('#txtPwd').val()==null) {
						alert('密码不能为空')
					}
				})

				$('#txtPwdOk').blur(function(){
					if ($('#txtPwdOk').val()=='' || $('#txtPwdOk').val()==null) {
						alert('确认密码不能为空')
						return false;
					}
					if ($('#txtPwd').val() != $('#txtPwdOk').val()) {
						alert('确认密码错误')
					}
				})

				
				$('#selProfessional').blur  (function () {
            	if ($("#selProfessional > option").length>1){
                if ($("#selProfessional").val()==""){
                    alert("请选择专业");
                    return false
               }
                }})


				$('#mySelf').blur (function(){
					if ($('#mySelf').val() ==''|| $('#mySelf'.val()=null)) {
						alert('介绍不能为空')
					}
				})

		 	})
		
			
			
		</script>
		<!-- https://blog.csdn.net/lf1949/article/details/123780316 -->
	</body>
</html>